<template>
	<div>
		<a-spin :spinning="loading" size="large" class="loading-spinner" />
		<div id="clearCOunt" @click="getOverallmessage" style="width: 0;height: 0;overflow: hidden;position: fixed;opacity: 0;"></div>

		<div class="show-pc">
			<div class="my-works" style="background-color: var( --color-bg-F6);" v-show="!loading">
				<div class="my-title">
					<div class="title_left">
						<div class="name-img-box">
							<img :src="userInfo.avatar ? userInfo.avatar : userImg" alt="" class="name-img">
						</div>
						<div class="info-container">
							<div class="information">
								<div class="username">{{ userInfo.realname }}</div>
								<div class="text">{{ userInfo.deptName }}&nbsp;&nbsp;{{ userInfo.positionName }}</div>
							</div>

						</div>
					</div>
					<div class="title_right">
						<div class="stats-item">
							<div class="number">{{ count.likeCount }}</div>
							<div class="text">获赞</div>
						</div>
						<div class="stats-item">
							<div class="number">{{ count.downloadCount }}</div>
							<div class="text">收藏</div>
						</div>
					</div>
				</div>


				<!-- 选择 -->
				<div class="selector-wrapper">
					<div class="selector-container">
						<div v-for="item in menuItems" :key="item.key" class="menu-item"
							:class="{ 'active': activeKey === item.key }" @click="handleSelect(item.key)">
							<img :src="getIconPath(item)" :alt="item.label" class="menu-img">
							{{ item.label }}
							<div v-if="item.key === 'notifications'">
								<div class="Overallmessage" v-if="!OverallmessageNum == 0">
									{{ OverallmessageNum }}
								</div>
							</div>

						</div>

					</div>
				</div>
				<div style="width:  95.8vw; margin: 0 auto;" v-if="showData">
					<component :is="currentComponent" :config="componentConfig" />
				</div>
			</div>
		</div>

		<!-- 手机登录按钮 -->
		<div class="show-wap">

			<!-- <div class="avatar-trigger" v-if="!isLogin">
				<div class="user_img" @click="openLogin">请登录</div>
			</div>

			<login ref="loginRef"></login> -->
		</div>
		<div>
			<!-- 手机 -->
			<div class="show-wap" v-if="!isPc">
				<div class="my-works-wap" style="background-color: var( --color-bg-F6);" v-show="!loading">
					<div class="my-title-wap">
						<div class="title_left-wap">
							<div>
								<img :src="userInfo.avatar ? userInfo.avatar : userImg" alt="头像" class="name-img-wap">
							</div>
							<div class="info-container-wap">
								<div class="information-wap">

									<div class="username-wap">{{ userInfo.realname }}</div>
									<div style="display: flex; gap: 5px;">
										<span class="text-wap">{{ userInfo.deptName }}</span>

										<span class="text-wap">{{ userInfo.positionName }}</span>

									</div>

								</div>
								<!-- <div class="account-wap">

									账号：{{ userInfo.username }}

									<img src="../../assets/images/new_img/复制2.png" alt=""
										@click="copyAccount( userInfo.username)" class="account-item"
										v-show="!isCopied">
									<img src="../../assets/images/new_img/已复制.png" alt="" class="account-item"
										v-show="isCopied">
								</div> -->

							</div>
						</div>

					</div>
					<!-- 选择 -->
					<div class="selector-wrapper-wap">
						<div class="selector-container-wap">
							<div v-for="item in menuItems" :key="item.key" class="menu-item-wap"
								:class="{ 'active': activeKey === item.key }" @click="handleSelect(item.key)">
								<img :src="getIconPath(item)" :alt="item.label" class="menu-icon-wap">
								{{ item.label }}
								<div v-if="item.key === 'notifications'">
									<div class="Overallmessage-wap" v-if="!OverallmessageNum == 0">
										{{ OverallmessageNum }}
									</div>
								</div>
							</div>
						</div>
					</div>

					<div style="width:  95.83333333333334vw; margin: 0 auto;">
						<component :is="currentComponent" :config="componentConfig" />
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script setup>
import {
	ref,
	watch,
	computed,
	onMounted
} from 'vue'
import {
	useRoute,
	useRouter
} from 'vue-router'
import Mywork from '@/components/Mywork/Mywork.vue'
import notification from '@/components/notification/notification.vue'
import Myattention from '@/components/Myattention/Myattention.vue'
import Mypraise from '@/components/Mypraise/Mypraise.vue'
import MyCollect from '@/components/MyCollect/MyCollect.vue'
import DownloadRecord from '@/components/DownloadRecord/DownloadRecord.vue'
import MyBrowsingHistory from "@/components/MyBrowsingHistory/MyBrowsingHistory.vue"
import {
	useHttp
} from '@/api/http'
const router = useRouter()
const route = useRoute()
import { useStore } from '@/store'
const { themeStore } = useStore()



// 是否登录
const isLogin = ref(false);
const loginRef = ref(null)
const isPc = ref(true)
onMounted(() => {
	isPc.value = window.innerWidth > 800
})

// 1. 动态加载图标（普通和选中状态）
const iconModules = import.meta.glob('@/assets/images/new_img/*.png', {
	eager: true
})
const getIcon = (name) => {
	const basePath = Object.keys(iconModules).find(path => path.includes(name))
	return basePath ? iconModules[basePath].default : ''
}




// 2. 图标配置
const menuItems = ref([{
	key: 'works',
	label: '我的作品',
	type: '笔'
},
{
	key: 'notifications',
	label: '消息提示',
	type: '消息'
},
{
	key: 'following',
	label: '我的关注',
	type: '关注'
},
{
	key: 'likes',
	label: '我的点赞',
	type: '心点赞'
},
{
	key: 'collections',
	label: '我的收藏',
	type: '收藏'
},
{
	key: 'downloads',
	label: '下载记录',
	type: '下载2'
},
{
	key: 'BrowsingHistory',
	label: '浏览记录',
	type: '眼睛'
}
])

// 3. 组件映射
const componentMap = {
	works: Mywork,
	notifications: notification,
	following: Myattention,
	likes: Mypraise,
	collections: MyCollect,
	downloads: DownloadRecord,
	BrowsingHistory: MyBrowsingHistory
}

const activeKey = ref('')
const currentComponent = computed(() => componentMap[activeKey.value])

// 4. 获取图标路径（根据是否选中）
const getIconPath = (item) => {


	const iconName = activeKey.value === item.key ?
		`选中${item.type}` // 选中状态
		:
		item.type // 普通状态

	return getIcon(iconName)
}

const handleSelect = (key) => {
	activeKey.value = key

	router.push({
		path: '/IndividualCenter/' + key
	})



}
// 用户信息数据
const userInfo = ref({});
const showData = ref(false)
const heUserIdData = ref({
	heUserId: ''
});
const getUserInfo = () => {
	useHttp.get('/web/my/heUser', {
		heUserId: getUserId()
	}).then((res) => {
		if (res.code === 200 && res.result) {
			userInfo.value = res.result
			heUserIdData.heUserId = res.result.id
			isLogin.value = true
			loading.value = false
			showData.value = true
			getOverallmessage()
			getCount()
		}
	})
}
getUserInfo()

// 获赞，收藏统计
const count = ref({
	likeCount: 0,
	downloadCount: 0,
})
const getCount = () => {
	count.value.likeCount = themeStore.userInfoMyCount.thumbCount
	count.value.downloadCount = themeStore.userInfoMyCount.collectCount

}

const OverallmessageNum = ref(0)
// 消息数量总计
const getOverallmessage = () => {
	useHttp.get(`/web/my/myMessageCount`).then((res) => {
		themeStore.messageList = res.result

		// Object.assign(themeStore.messageList, {
		// 	...themeStore.messageList,
		// 	messageList: res.result,
		// });
		OverallmessageNum.value=themeStore.messageList.messageCount
	})
}



watch(
	() => route.params.id,
	(newId) => {
		if (newId) {
			activeKey.value = newId
		}
	}, {
	immediate: true
}
)

const componentConfig = ref({
	showActions: true,
	editable: false
})


// 用于控制是否显示"已复制"提示
const isCopied = ref(false);

// 复制操作
const copyAccount = (id) => {
	const account = id;
	const tempInput = document.createElement('input');
	tempInput.value = account;
	document.body.appendChild(tempInput);


	tempInput.select();
	document.execCommand('copy');

	// 删除临时输入框
	document.body.removeChild(tempInput);

	// 显示复制成功提示
	isCopied.value = true;

	// 3秒后隐藏提示
	setTimeout(() => {
		isCopied.value = false;
	}, 3000);
};

// 加载状态控制
const loading = ref(true)

// 打开登录
const openLogin = () => {
	loginRef.value.open()
}
</script>


<style lang="less" scoped>
.user_img {
	width: 120px;
	height: 50px;
	margin: 0 auto;
	margin-top: 50px;
	text-align: center;
	line-height: 50px;
	color: #fff;
	border-radius: 10px;
	background-color: #ee9b86;
	font-size: 18px;
}

.my-works {


	width: 100%;

	margin: 0 auto;

	min-height: 100vh;


	.my-title {
		width: 95.83333333333334vw;
		margin: 0 auto;
		margin-top: 0.52vw;
		min-height: 10.4vw;
		display: flex;
		flex-wrap: wrap;

		justify-content: space-between;
		align-items: center;
		padding: 1.04vw;
		gap: 1.04vw;

		.title_left {
			display: flex;
			flex-wrap: wrap;
			gap: 1.04vw;
			align-items: center;
			flex: 1;
			min-width: 13vw;

			.name-img-box {
				width: 5vw;
				height: 5vw;


				.name-img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					object-fit: cover;

				}
			}



			.info-container {
				display: flex;
				flex-direction: column;
				gap: 0.41vw;

			}

			.information {

				.username {

					font-size: var(--text-22);
					color: var(--color-text-3);
					margin: 0.52vw 0vw;
					line-height: 1.2;
				}

				.text {

					font-size: var(--text-16);
					color: var(--color-text-3);
				}


			}

			.account {
				margin-top: 0.52vw;
				font-size: var(--text-14);
				color: var(--color-text);
				display: flex;
				align-items: center;
				gap: 0.26vw;


				.account-item {
					width: 0.625vw;
					height: 0.625vw;
				}
			}
		}

		.title_right {
			display: flex;

			gap: 1vw;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
			color: var(--color-text);

			.stats-item {
				text-align: center;
				min-width: 4.16vw;

				.number {
					font-size: var(--text-30);
					color: #d1000d;
					line-height: 1;
					margin-bottom: 0.31vw;

				}

				.text {
					font-size: var(--text-14);

				}


			}
		}
	}

	.selector-wrapper {
		width: 100%;
		height: 3.64vw;
		background-color: var(--color-bg-20);
		display: flex;

		align-content: center;

		/* 选择器主体 */
		.selector-container {
			width: 95.83333333333334vw;
			margin: 0 auto;
			display: flex;
			border-radius: 0.41vw;

			overflow-x: auto;
			/* 最大宽度限制 */
			scrollbar-width: none;
			/* 隐藏滚动条（Firefox） */
		}


	}





	.menu-item {
		padding: 12px clamp(12px, 2vw, 24px);
		/* 响应式内边距 */
		cursor: pointer;
		white-space: nowrap;
		position: relative;
		transition: all 0.3s ease;
		flex-shrink: 0;
		font-size: var(--text-16);
		color: var(--color-text);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6px;

		.menu-img {
			width: 0.8vw;
			height: 0.8vw;
		}

		.Overallmessage {
			width: 0.8vw;
			height: 0.8vw;
			text-align: center;
			background-color: #d1000d;
			line-height: 0.8vw;
			border-radius: 50%;
			color: #fff;
			font-weight: 500;
			font-size: var(--text-10-F);
			position: relative;
			bottom: 0.52vw;
		}

	}




	.selector-container::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条（Chrome/Safari） */
	}


	.menu-item.active {
		color: #d7000e;
		font-weight: 500;
	}

	.menu-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60%;
		height: 2px;
		background-color: currentColor;
	}


}

/* 响应式调整 */
@media (max-width: 768px) {
	.my-works {
		max-width: 90vw;
		padding: 10px;

		.my-title {
			flex-direction: column;
			align-items: flex-start;
			gap: 30px;

			.title_left {
				width: 100%;
			}

			.title_right {
				width: 100%;
				justify-content: flex-start;
			}
		}
	}

	.selector-container {
		max-width: 90vw;
		/* 小屏幕放宽限制 */
	}

	.menu-item {
		padding: 10px clamp(8px, 3vw, 16px);
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.my-works {
		max-width: 100vw;
		padding: 10px 5px;

		.my-title {
			padding: 10px;

			.title_left {
				gap: 15px;

				.information {
					gap: 5px;
				}
			}
		}
	}

	.selector-wrapper {
		padding: 0;
		justify-content: flex-start;
	}

	.selector-container {
		max-width: 100vw;
		border-radius: 0;
	}
}


.my-works-wap {
	width: 100%;

	margin: 0 auto;
	margin-bottom: 80px;
	min-height: 100vh;
	// height: auto;
	// max-height: 100vh;
	// overflow-y: auto;
	// border: 1px solid red;


	.text-wap {
		font-size: 16px;
	}

	.my-title-wap {

		margin: 0 auto;

		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		gap: 20px;

		.title_left-wap {
			display: flex;
			gap: 14px;
			align-items: center;
			flex: 1;
			min-width: 250px;

			.name-img-wap {
				width: clamp(80px, 10vw, 100px);
				/* 响应式头像大小 */
				height: clamp(80px, 10vw, 100px);
				border-radius: 50%;
				object-fit: cover;
			}

			.info-container-wap {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}

			.information-wap {
				display: grid;

				gap: 2px;
				color: var(--color-text-3);

				.username-wap {
					font-size: 18px;

				}


			}

			.account-wap {
				font-size: clamp(12px, 1.5vw, 14px);
				color: var(--color-text);
				display: flex;
				align-items: center;
				gap: 5px;


				.account-item {
					width: 15px;
					height: 15px;
				}

			}

			.title_right-wap {

				display: flex;
				gap: 14px;
				color: var(--color-text);

				.like-wap {
					font-size: 14px;
				}
			}
		}


	}


	.selector-wrapper-wap {
		width: 100%;
		height: 50px;
		background-color: var(--color-bg-20);
		display: flex;
		align-content: center;

		/* 选择器主体 */
		.selector-container-wap {
			width: 95.83333333333334vw;
			margin: 0 auto;
			display: flex;
			border-radius: 8px;
			overflow-x: auto;
			scrollbar-width: none;

		}

		.menu-item-wap {
			padding: 12px clamp(12px, 2vw, 24px);
			cursor: pointer;
			white-space: nowrap;
			position: relative;
			transition: all 0.3s ease;
			flex-shrink: 0;
			font-size: 16px;
			color: var(--color-text);
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 6px;

			.menu-icon-wap {
				width: 18px;
				height: 18px;
			}

			.Overallmessage-wap {
				width: 14px;
				height: 14px;
				text-align: center;
				background-color: #d1000d;
				line-height: 14px;
				border-radius: 50%;
				color: #fff;
				font-weight: 500;
				font-size: 10px;
				position: relative;
				bottom: 10px;
			}

		}

		.menu-item-wap.active {
			color: #d7000e;
			font-weight: 500;
		}

		.menu-item-wap.active::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 60%;
			height: 2px;
			background-color: currentColor;
		}

	}
}
</style>